<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮点流觞 - 新房</title>
  <link rel="stylesheet" href="ui.css">
</head>

<body>
<!-- 顶部导航栏 -->
<header>
  <div class="top-bar">
    <div class="logo-container">
      <!-- <img src="logo.jpg" alt="logo"> -->
      <span class="logo-text">浮点流觞</span>
    </div>
    <div class="sub-nav">
      <a href="gerenzhongxin.html">个人中心</a>
      <a href="#">商家中心</a>
      <a href="bangzhuzhongxin.html">帮助中心</a>
      <a href="kefu.html">联系客服</a>
      <a href="login.html" class="login-item">登录</a>
      <a href="register.html" class="register-item">注册</a>
    </div>
  </div>
  <div class="logo-search">
    <form action="#" class="search-form">
      <input type="text" placeholder="请输入房源相关信息">
      <button type="submit">搜房源</button>
    </form>
    <a href="fabufangyuan.html" class="free-publish">免费发布</a>
  </div>
</header>

<!-- 分类导航栏 -->
<nav class="category-nav">
  <a href="zufang.html" class="category-item">租房</a>
  <a href="ershoufang.html" class="category-item">二手房</a>
  <a href="xinfang.html" class="category-item active">新房</a> <!-- 修改链接并添加 active 类 -->
  <a href="#" class="category-item">商铺</a>
  <a href="#" class="category-item">生意转让</a>
  <a href="#" class="category-item">写字楼</a>
  <a href="#" class="category-item">厂房</a>
  <a href="#" class="category-item">仓库</a>
  <a href="#" class="category-item">土地</a>
  <a href="#" class="category-item">车位</a>
</nav>

<!-- 路径导航 -->
<div class="breadcrumbs">
  <a href="#">房产网</a> > <a href="#">新房</a> <!-- 修改路径 -->
</div>

<!-- 筛选条件区域 -->
<div class="filter-area">
  <div class="filter-group">
    <label for="region">地域</label>
    <select id="region">
      <option value="不限">不限</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="成都">成都</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="杭州">杭州</option>
      <option value="西安">西安</option>
    </select>
  </div>
  <div class="filter-group">
    <label for="area">区域</label>
    <select id="area">
      <option value="不限">不限</option>
      <!-- 北京的区域示例 -->
      <option value="朝阳区" data-region="北京">朝阳区</option>
      <option value="海淀区" data-region="北京">海淀区</option>
      <!-- 上海的区域示例 -->
      <option value="浦东新区" data-region="上海">浦东新区</option>
      <option value="黄浦区" data-region="上海">黄浦区</option>
      <!-- 成都的区域示例 -->
      <option value="武侯区" data-region="成都">武侯区</option>
      <option value="锦江区" data-region="成都">锦江区</option>
      <!-- 广州的区域示例 -->
      <option value="天河区" data-region="广州">天河区</option>
      <option value="越秀区" data-region="广州">越秀区</option>
      <!-- 深圳的区域示例 -->
      <option value="南山区" data-region="深圳">南山区</option>
      <option value="福田区" data-region="深圳">福田区</option>
      <!-- 杭州的区域示例 -->
      <option value="西湖区" data-region="杭州">西湖区</option>
      <option value="滨江区" data-region="杭州">滨江区</option>
      <!-- 西安的区域示例 -->
      <option value="雁塔区" data-region="西安">雁塔区</option>
      <option value="未央区" data-region="西安">未央区</option>
    </select>
  </div>
  <div class="filter-group">
    <label for="subway">地铁线路</label>
    <select id="subway">
      <option value="不限">不限</option>
      <!-- 地铁线路选项可按需求添加 -->
    </select>
  </div>
  <div class="filter-group">
    <label for="community">小区</label>
    <input type="text" id="community">
  </div>
  <div class="filter-group">
    <label for="price">价格</label>
    <select id="price">
      <option value="不限">不限</option>
      <option value="50万以下">50万以下</option>
      <option value="50-100万">50-100万</option>
      <!-- 其他价格区间选项可按需求添加 -->
    </select>
  </div>
  <div class="filter-group">
    <label for="room">厅室</label>
    <select id="room">
      <option value="不限">不限</option>
      <option value="一室">一室</option>
      <option value="两室">两室</option>
      <!-- 其他厅室选项可按需求添加 -->
    </select>
  </div>
  <div class="filter-group">
    <label for="way">方式</label>
    <select id="way">
      <option value="不限">不限</option>
      <option value="期房">期房</option>
      <option value="现房">现房</option>
    </select>
  </div>
  <div class="filter-group">
    <label for="other">其他</label>
    <select id="other">
      <option value="朝向不限">朝向不限</option>
      <option value="装修不限">装修不限</option>
      <!-- 其他筛选选项可按需求添加 -->
    </select>
  </div>
  <button type="button" class="filter-reset">重置筛选</button>
</div>

<!-- 房源展示区域 -->
<main class="listing-area">
  <div class="listing-tab">
    <a href="#" class="tab-item">出租房</a>
    <a href="#" class="tab-item">个人房源</a>
    <a href="#" class="tab-item">实拍真房</a>
    <a href="#" class="tab-item">经纪人</a>
    <a href="#" class="tab-item">安选房源</a>
    <a href="#" class="tab-item">长租公寓</a>
    <a href="#" class="tab-item">民宿短租</a>
    <a href="#" class="contact客服">联系客服</a>
  </div>
  <div id="listing-container">
    <!-- 新房房源示例 -->
    <div class="listing-item">
      <img src="xinfang1.jpg" alt="新房图片">
      <h3>新房标题1</h3>
      <p>价格：100万</p>
      <p>位置：北京市朝阳区</p>
    </div>
    <div class="listing-item">
      <img src="xinfang2.jpg" alt="新房图片">
      <h3>新房标题2</h3>
      <p>价格：150万</p>
      <p>位置：上海市浦东新区</p>
    </div>
  </div>
</main>
<script src="script.js"></script>
</body>

</html>